<template>
  <div class="app-container">
    <div v-loading="listLoading">
      <!-- 基本信息 -->
      <div class="box">
        <span class="l_title">基本信息</span>
        <el-row class="infolist infolist_top">
          <el-col :span="3">客户姓名：{{ detail.real_name }}</el-col>
          <el-col :span="3">电话：{{ detail.mobile }}</el-col>
          <el-col v-if="bool.base_info&&bool.base_info.age>49" :span="5" style="color:orangered">
            身份证号码：{{ detail.idcard }}</el-col>
          <el-col v-else :span="5">身份证号码：{{ detail.idcard }}</el-col>
          <el-col :span="6">申请医院：{{ detail.merchant_name }}</el-col>
          <el-col :span="6">提交时间：{{ detail.create_time|formatDate }}</el-col>
          <el-col v-if="detail.rela!=''" :span="6" style="color:red;margin-top:10px">号码异常：
            <span
              v-for="(item,index) in detail.rela"
              style="cursor: pointer;"
              @click="toDetail(item.order_id)"
            >{{ item.name }}、</span>
          </el-col>
          <!-- <el-col :span="6" style="margin-top:10px">身份证验证：
            <span
              v-if="bairong.idcard.RESULT==2||bairong.idcard==''"
              style="color:red;"
            >{{ bairong.idcard.MESSAGE }}</span>
            <span v-else>{{ bairong.idcard.MESSAGE }}</span>
          </el-col>
           <el-col :span="6" style="margin-top:10px">黑名单库：
            <span
              v-if="detail.blacklist==1"
              style="color:red;"
            >命中</span>
            <span v-else>未命中</span>
          </el-col> -->
        </el-row>
      </div>
      <el-divider />
      <!-- 大数据分析和异常点 -->
      <div class="box">
        <span class="l_title">大数据分析和异常点</span>
        <el-row class="infolist infolist_top">
          <el-col :span="3">布尔大数据</el-col>
          <el-col :span="3">综合得分：{{ bool.score_norm_explain }}</el-col>
          <el-col :span="5">审核建议：{{ bool.verify_recomment }}</el-col>
          <el-col :span="8">风险标注：<span v-for="(item,index) in bool.hit_risk_tagging">{{ item }}、</span></el-col>
          <el-col :span="2" class="toinfo">
            <el-button style="float: right; padding: 0 0;" type="text" @click="booldata(detail.order_id)">查看更多
            </el-button>
          </el-col>
        </el-row>
        <!-- <el-row  class="infolist infolist_top">
        <el-col :span="3">同盾大数据</el-col>
        <el-col :span="3">风险分数：{{ tong.final_score }}</el-col>
        <el-col :span="5">决策结果：{{ tong.final_decision }}</el-col>
        <el-col :span="10" class="toinfo">
            <el-button style="float: right; padding: 0 0;" type="text" @click="tongdun(detail.order_id)">查看更多</el-button>
          </el-col>
      </el-row> -->
      <el-row  class="infolist infolist_top">
        <el-col :span="19">百融大数据</el-col>
        <!-- <el-col :span="3">风险分数：{{ bairong.final_weight }}</el-col>
        <el-col :span="5">决策结果：{{ bairong.final_decision }}</el-col>
        <el-col :span="8">自然人：<span >{{ bairong.person }}</span></el-col> -->
        <el-col :span="2" class="toinfo">
            <el-button style="float: right; padding: 0 0;" type="text" @click="bairongdetail(detail.order_id)">查看更多</el-button>
          </el-col>
      </el-row>
      </div>
      <el-divider v-if="detail.order_status>=4" />
      <!-- 信审申请信息 -->
      <div v-if="detail.order_status>=4" class="box">
        <span class="l_title">信审申请信息</span>
        <el-row class="infolist infolist_top">
          <el-col :span="3">项目金额：{{ detail.project.total_money }}</el-col>
          <el-col :span="3">
            总债权金额：{{ detail.project.total_money+detail.project.total_money * detail.project.money_rate*detail.project.total_period |numberFormat }}
          </el-col>
          <el-col :span="5">服务项目：<span>{{ projects }}</span></el-col>
          <el-col :span="8">商户名称：{{ detail.merchant_name }}</el-col>
        </el-row>
        <el-row class="infolist">
          <el-col :span="3" class="mgtop">订单期数：{{ detail.project.total_period }}</el-col>
          <el-col :span="3" class="mgtop">月还款金额：{{ period_money | numberFormat }}</el-col>
          <el-col :span="5" class="mgtop">
            开始还款日：
            <span v-if="this.eight==0">{{ payment_date|formatDateYearMonthDay }} 23:59:59前</span>
            <span v-if="this.eight==1">{{ payment_date|formatDateYearMonth }} 23:59:59前</span>
          </el-col>
          <el-col :span="6" class="mgtop">
            最终还款日:
            <span v-if="this.eight==0">{{ paid_date|formatDateYearMonthDay }} 23:59:59前</span>
            <span v-if="this.eight==1">{{ paid_date|formatDateYearMonth }} 23:59:59前</span>
          </el-col>
        </el-row>
        <el-row class="infolist infolist_top">
          <el-col :span="3">手术日期：{{ detail.operation_date }}</el-col>
          <el-col :span="3">每期还款日：{{ pay_day }}号</el-col>
          <el-col :span="5">渠道姓名：{{ detail.invitees }}</el-col>
          <el-col :span="6">渠道电话：{{ detail.invitees_mobile }}</el-col>
        </el-row>
        <el-row class="infolist infolist_top">
          <el-col :span="14">
            备注信息：{{ detail.project.desc }}
          </el-col>
        </el-row>
      </div>
      <el-divider v-if="detail.order_status>=4" />
      <!-- 认证信息 -->
      <div v-if="detail.order_status>=5" class="box">
        <span class="l_title">认证信息</span>
        <el-row class="infolist infolist_top">
          <el-col :span="3">学历：{{ detail.letter.education }}</el-col>
          <el-col :span="4">职业：{{ detail.letter.duty }}</el-col>
          <el-col :span="6">单位名称：{{ detail.letter.company_name }}</el-col>
          <el-col :span="11">单位地址：{{ detail.letter.company_address }}</el-col>

          <!-- <el-col :span="6" class="mgtop" >户籍地址：{{ detail.letter.household_reg_address }}</el-col>
        <el-col :span="6" class="mgtop" >家庭住址：{{ detail.letter.family_address }}</el-col> -->
        </el-row>
        <el-row class="infolist infolist_top">
          <el-col :span="7">户籍地址：{{ detail.letter.household_reg_address }}</el-col>
          <el-col :span="6">家庭住址：{{ detail.letter.family_address }}</el-col>
        </el-row>

      </div>
      <el-divider v-if="detail.order_status>=5" />
      <!-- 紧急联系人 -->
      <div v-if="detail.order_status>=4&&detail.relation!=''" class="box">
        <span class="l_title">紧急联系人</span>
        <el-row v-for="(item,index) in detail.relation" class="infolist infolist_top">
          <el-col :span="3">联系人{{ index+1 }}</el-col>
          <el-col :span="3">姓名：{{ item.name }}</el-col>
          <el-col :span="5">电话：{{ item.mobile }}</el-col>
          <el-col :span="4">关系：{{ item.relation_name }}</el-col>
          <el-col v-if="item.rela!=''" :span="6" style="color:red;">号码异常：
            <span v-for="(v,k) in item.rela" style="cursor: pointer;" @click="toDetail(v.order_id)">{{ v.name }}、</span>
          </el-col>
        </el-row>
      </div>
      <!-- 合同信息审核信息 -->
      <el-collapse v-model="activeName" style="margin-top:15px">
        <el-collapse-item v-if="detail.order_status>=5" title="信审申请信息(视频图片)" name="1">
          <div class="box">
            <span class="l_title">通讯信息</span>
            <el-row class="infolist infolist_top">
              <el-col :span="24">
                <div v-for="(item,index) in project.tongxunlu" class="grid-content bg-purple-light video_box">
                  <div class="dalogg" @click="openVideoDialog(item.path)" />
                  <video :src="item.path+'#t=1'" preload="none" controls type="video/mp4" poster />
                </div>
                <div v-for="(item,index) in project.tonghuajilu" class="grid-content bg-purple-light video_box">
                  <div class="dalogg" @click="openVideoDialog(item.path)" />
                  <video :src="item.path" preload="none" controls type="video/mp4" />
                </div>
                <!-- <div class="grid-content bg-purple-light video_box contact_box" v-if="contact.contact!=''||contact.call_log!=''||contact.sms!=''" >
                <el-button class="btn_contact" type="primary" plain v-if="contact.contact!=''" @click="openContactDialog(1)">通讯录</el-button><br/>
                <el-button class="btn_contact" type="primary" plain v-if="contact.call_log!=''" @click="openContactDialog(2)">通话记录</el-button><br/>
                <el-button class="btn_contact" type="primary" plain v-if="contact.sms!=''" @click="openContactDialog(3)"> 短信</el-button><br/>
              </div> -->
              </el-col>
            </el-row>
          </div>
          <div class="box" style="margin-top:20px">
            <span class="l_title">图片信息</span>
            <el-row class="infolist infolist_top">
              <el-col :span="24">
                <viewer style="display:inline">
                  <div v-for="(item,index) in project.idcard_zheng" class="grid-content bg-purple-light img_box">
                    <div class="hovers">身份证</div>
                    <img :src="item.path" height="100%" width="100%">
                  </div>
                  <div v-for="(item,index) in project.idcard_fan" class="grid-content bg-purple-light img_box">
                    <div class="hovers">身份证</div>
                    <img :src="item.path" height="100%" width="100%">
                  </div>
                  <div v-for="(item,index) in project.zhimafen" class="grid-content bg-purple-light img_box">
                    <div class="hovers">芝麻分</div>
                    <img :src="item.path" height="100%" width="100%">
                  </div>
                  <div v-for="(item,index) in project.huabei" class="grid-content bg-purple-light img_box">
                    <div class="hovers">花呗</div>
                    <img :src="item.path" height="100%" width="100%">
                  </div>
                  <div v-for="(item,index) in project.jiebei" class="grid-content bg-purple-light img_box">
                    <div class="hovers">借呗</div>
                    <img :src="item.path" height="100%" width="100%">
                  </div>
                  <div v-for="(item,index) in project.relation1" class="grid-content bg-purple-light img_box">
                    <div class="hovers">联系人1</div>
                    <img :src="item.path" height="100%" width="100%">
                  </div>
                  <div v-for="(item,index) in project.relation2" class="grid-content bg-purple-light img_box">
                    <div class="hovers">联系人2</div>
                    <img :src="item.path" height="100%" width="100%">
                  </div>
                  <div v-for="(item,index) in project.shouchi" class="grid-content bg-purple-light img_box">
                    <div class="hovers">手持照片</div>
                    <img :src="item.path" height="100%" width="100%">
                  </div>
                  <div v-for="(item,index) in project.taobao_address" class="grid-content bg-purple-light img_box">
                    <div class="hovers">淘宝地址</div>
                    <img :src="item.path" height="100%" width="100%">
                  </div>
                  <div v-for="(item,index) in project.taobao_buy_record" class="grid-content bg-purple-light img_box">
                    <div class="hovers">淘宝购买记录</div>
                    <img :src="item.path" height="100%" width="100%">
                  </div>
                  <div v-for="(item,index) in project.wechat_income" class="grid-content bg-purple-light img_box">
                    <div class="hovers">微信收入</div>
                    <img :src="item.path" height="100%" width="100%">
                  </div>
                  <div v-for="(item,index) in project.wechat_outcome" class="grid-content bg-purple-light img_box">
                    <div class="hovers">微信支出</div>
                    <img :src="item.path" height="100%" width="100%">
                  </div>
                  <div v-for="(item,index) in project.alipay_income" class="grid-content bg-purple-light img_box">
                    <div class="hovers">支付宝收入</div>
                    <img :src="item.path" height="100%" width="100%">
                  </div>
                  <div v-for="(item,index) in project.alipay_outcome" class="grid-content bg-purple-light img_box">
                    <div class="hovers">支付宝支出</div>
                    <img :src="item.path" height="100%" width="100%">
                  </div>
                  <div v-for="(item,index) in project.yearly" class="grid-content bg-purple-light img_box">
                    <div class="hovers">年账单</div>
                    <img :src="item.path" height="100%" width="100%">
                  </div>
                  <div v-for="(item,index) in project.other" class="grid-content bg-purple-light img_box">
                    <div class="hovers">其他</div>
                    <img :src="item.path" height="100%" width="100%">
                  </div>
                </viewer>
              </el-col>
            </el-row>
          </div>
        </el-collapse-item>
        <el-collapse-item v-if="detail.order_status>4" title="合同信息(视频图片)" name="2">
          <div class="box">
            <el-row class="infolist infolist_top">
              <el-col :span="24">
                <viewer style="display:inline">
                  <div v-for="(item,index) in contract.fenqi" class="grid-content bg-purple-light img_box">
                    <div class="hovers">分期协议</div>
                    <img :src="item.path" height="100%" width="100%">
                  </div>
                  <div v-for="(item,index) in contract.shoushu" class="grid-content bg-purple-light img_box">
                    <div class="hovers">手术消费单</div>
                    <img :src="item.path" height="100%" width="100%">
                  </div>
                  <div v-for="(item,index) in contract.student" class="grid-content bg-purple-light img_box">
                    <div class="hovers">不是学生承诺书</div>
                    <img :src="item.path" height="100%" width="100%">
                  </div>
                  <div v-for="(item,index) in contract.comfire_order" class="grid-content bg-purple-light img_box">
                    <div class="hovers">术后确认单</div>
                    <img :src="item.path" height="100%" width="100%">
                  </div>
                  <div v-for="(item,index) in contract.should" class="grid-content bg-purple-light img_box">
                    <div class="hovers">应收转让协议</div>
                    <img :src="item.path" height="100%" width="100%">
                  </div>
                  <div v-for="(item,index) in contract.shoushu_agree" class="grid-content bg-purple-light img_box">
                    <div class="hovers">手术知情同意书</div>
                    <img :src="item.path" height="100%" width="100%">
                  </div>
                  <div v-for="(item,index) in contract.shoushu_tongzhi" class="grid-content bg-purple-light img_box">
                    <div class="hovers">手术通知单</div>
                    <img :src="item.path" height="100%" width="100%">
                  </div>
                  <div v-for="(item,index) in contract.logo" class="grid-content bg-purple-light img_box">
                    <div class="hovers">LOGO</div>
                    <img :src="item.path" height="100%" width="100%">
                  </div>
                  <div v-for="(item,index) in contract.security_agreement" class="grid-content bg-purple-light img_box">
                    <div class="hovers">担保协议({{ detail.project.guarantee }})</div>
                    <img :src="item.path" height="100%" width="100%">
                  </div>
                </viewer>
              </el-col>
            </el-row>
          </div>
        </el-collapse-item>
        <el-collapse-item v-if="detail.order_status>=10" title="术后照片" name="3">
          <div class="box">
            <el-row class="infolist infolist_top">
              <el-col :span="24">
                <viewer style="display:inline">
                  <div v-for="(item,index) in operation" class="grid-content bg-purple-light img_box">
                    <div class="hovers">术后照片</div>
                    <img :src="item.path" height="100%" width="100%">
                  </div>
                </viewer>
              </el-col>
            </el-row>
          </div>
        </el-collapse-item>
        <el-collapse-item title="订单操作" name="4" style="font-size:13px">
          <template>
            <el-tabs v-model="activeNameDone" style="margin-left:60px" @tab-click="handleClick">
              <el-tab-pane
                v-if="nodes.indexOf('91')!=-1&&(detail.order_status==1 || detail.order_status==5 || detail.order_status==8 || detail.order_status==10|| detail.order_status==11)"
                label="审核"
                name="1"
              >
                <el-form ref="dataForm" :model="form" label-width="90px" :rules="rules">
                  <el-form-item v-if="detail.project.guarantee!=null" label="担保人:">
                    {{ detail.project.guarantee }}
                  </el-form-item>
                  <el-form-item label="审核" prop="order_status">
                    <el-radio-group v-if="detail.order_status==1" v-model="form.order_status">
                      <el-radio label="3">通过</el-radio>
                      <el-radio label="2">驳回</el-radio>
                      <el-radio label="20">拒绝</el-radio>
                    </el-radio-group>
                    <el-radio-group v-if="detail.order_status==5" v-model="form.order_status">
                      <el-radio label="7">通过</el-radio>
                      <el-radio label="6">驳回</el-radio>
                      <el-radio label="20">拒绝</el-radio>
                    </el-radio-group>
                    <el-radio-group v-if="detail.order_status==8" v-model="form.order_status">
                      <el-radio label="10">通过</el-radio>
                      <el-radio label="9">驳回</el-radio>
                      <el-radio label="20">拒绝</el-radio>
                    </el-radio-group>
                    <el-radio-group v-if="detail.order_status==10" v-model="form.order_status">
                      <el-radio label="14">退单</el-radio>
                      <el-radio label="20">拒绝</el-radio>
                    </el-radio-group>
                    <el-radio-group v-if="detail.order_status==11" v-model="form.order_status">
                      <el-radio label="13">通过</el-radio>
                      <el-radio label="12">驳回</el-radio>
                      <el-radio label="20">拒绝</el-radio>

                    </el-radio-group>
                  </el-form-item>
                  <el-form-item v-if="form.order_status==7" label="保理模式" prop="factoring_rate">
                    <el-radio-group v-model="form.factoring_model">
                      <el-radio label="1">正常</el-radio>
                      <el-radio label="2">买断</el-radio>
                      <el-radio label="3">绿通</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item v-if="form.order_status==7" label="保证金" prop="is_bond">
                    <el-radio-group v-model="form.is_bond">
                      <el-radio label="1">系统默认</el-radio>
                      <el-radio label="2">有保证金</el-radio>
                      <el-radio label="3">无保证金</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item v-if="form.order_status==7&&form.is_bond==2" label="保证金:">
                    <el-input v-model="form.bond" style="width:80px" type="number" /> 期
                  </el-form-item>
                  <el-form-item v-if="form.order_status==7||form.order_status==20" label="折扣率:" prop="factoring_rate">
                    <el-input v-model="form.factoring_rate" type="text" @keyup.native="mathauto(1)" style="width:30%" />
                  </el-form-item>
                  <el-form-item v-if="form.order_status==7||form.order_status==20" label="首打款:" prop="first_pay" >
                    <el-input v-model="form.first_pay" type="text" @keyup.native="mathauto(2)" style="width:30%" />
                  </el-form-item>

                  <!-- <el-form-item v-if="form.order_status==7||form.order_status==20" label="本人情况:" prop="selfs">
                    <el-input v-model="form.selfs" type="textarea" />
                  </el-form-item>
                  <el-form-item v-if="form.order_status==7||form.order_status==20" label="家庭情况:" prop="famliy">
                    <el-input v-model="form.famliy" type="textarea" />
                  </el-form-item>
                  <el-form-item v-if="form.order_status==7||form.order_status==20" label="负债情况:" prop="liabilities">
                    <el-input v-model="form.liabilities" type="textarea" />
                  </el-form-item>
                  <el-form-item v-if="form.order_status==7||form.order_status==20" label="其他情况:" prop="others">
                    <el-input v-model="form.others" type="textarea" /> 
                  </el-form-item>
                  <el-form-item v-if="form.order_status==7" label="通过点:" prop="others">
                    <el-input v-model="form.point" type="textarea" />
                  </el-form-item>
                  <el-form-item v-if="form.order_status==20" label="拒绝点:" prop="others">
                    <el-input v-model="form.point" type="textarea" />

                  </el-form-item> -->


                  <el-form-item label="备注:" prop="content">
                    <el-input v-model="form.content" type="textarea" style="width:30%" />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">确定</el-button>
                    <el-button>取消</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane v-if="nodes.indexOf('91')!=-1" label="客户备注表" name="6">
                <el-table
                  :data="tableDataMain"
                  class="elTable"
                  :cell-style="{borderColor:'#666'}"
                  size="mini"
                  border
                  style="width: 25%;float:left"
                  :show-header="false"
                >
                  <el-table-column prop="title" width="120" cell-style="font-weight: 700;">
                    <template slot-scope="{row}">
                      <b>{{ row.title }}</b>
                    </template>
                  </el-table-column>
                  <el-table-column prop="value">
                    <template slot-scope="{row}">
                      <b v-if="row.editable==1&&detail.desc_able">{{ row.value }}</b>
                      <span v-else>{{ row.value }}</span>
                      <i
                        v-if="row.editable==1&&detail.desc_able"
                        class="el-icon-edit-outline eidtIcon"
                        @click="tableEditMainDesc(row,1)"
                      />
                    </template>
                  </el-table-column>
                </el-table>
                <el-table
                  :data="tableDataRelation"
                  class="elTable"
                  :cell-style="{borderColor:'#666'}"
                  size="mini"
                  border
                  style="width: 70%;float:left;margin-left:30px"
                  :show-header="false"
                >
                  <el-table-column prop="relation" width="60">
                    <template slot-scope="{row}">
                      <b>{{ row.relation_name }}:</b>
                    </template>
                  </el-table-column>
                  <el-table-column prop="real_name" width="130">
                    <template slot-scope="{row}">
                      {{ row.name }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="job" width="100"><b>工作/地址:</b></el-table-column>
                  <el-table-column prop="job_name">
                    <template slot-scope="{row}">
                      <b>{{ row.work_address }}</b>
                      <i
                        v-if="detail.desc_able"
                        class="el-icon-edit-outline eidtIcon"
                        @click="tableEditLetterDesc(row,'work_address','工作/地址')"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column prop="mobile" width="70"><b>电话:</b></el-table-column>
                  <el-table-column prop="mobile_num" width="120">
                    <template slot-scope="{row}">
                      <b>{{ row.mobile }}</b>
                    </template>
                  </el-table-column>
                  <el-table-column prop="alipay" width="90"><b>支付宝匹配:</b></el-table-column>
                  <el-table-column prop="alipay_num" width="100">
                    <template slot-scope="{row}">
                      <b>{{ row.alipay }}</b>
                      <i
                        v-if="detail.desc_able"
                        class="el-icon-edit-outline eidtIcon"
                        @click="tableEditLetterDesc(row,'alipay','支付宝匹配')"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column prop="wechant" width="80"><b>微信匹配:</b></el-table-column>
                  <el-table-column prop="wechant_num" width="100">
                    <template slot-scope="{row}">
                      <b>{{ row.wechat }}</b>
                      <i
                        v-if="detail.desc_able"
                        class="el-icon-edit-outline eidtIcon"
                        @click="tableEditLetterDesc(row,'wechat','微信匹配')"
                      />
                    </template>
                  </el-table-column>
                </el-table>
                <!-- <el-table :data="tableDataDesc" size="mini" border style="width: 60%;float:left;margin-left:30px;margin-top:30px" :row-style="iRowStyle" :show-header="false" :span-method="objectSpanMethod">
                <el-table-column  width="100">
                   <template slot-scope="{row}">
                    {{row.relation}}
                   </template>
                </el-table-column>
                <el-table-column  prop="real_name">
                  <template slot-scope="scope">
                    {{tableDataDesc[scope.$index].real_name}}<i class="el-icon-edit-outline eidtIcon" ></i>
                  </template>
                </el-table-column>
                <el-table-column  >
                  <template slot-scope="{row}">
                    {{row.job}}<i class="el-icon-edit-outline eidtIcon" @click="tableDbEdit(row.$index)" ></i>
                  </template>
                </el-table-column>
                <el-table-column  >
                  <i class="el-icon-edit-outline eidtIcon" @click="tableDbEdit(scope.$index)" ></i>
                </el-table-column>
                <el-table-column  > <i class="el-icon-edit-outline eidtIcon" @click="tableDbEdit(scope.$index)" ></i></el-table-column>
                <el-table-column  > <i class="el-icon-edit-outline eidtIcon" @click="tableDbEdit(scope.$index)" ></i></el-table-column>
                <el-table-column  > <i class="el-icon-edit-outline eidtIcon" @click="tableDbEdit(scope.$index)" ></i></el-table-column>
                <el-table-column  > <i class="el-icon-edit-outline eidtIcon" @click="tableDbEdit(scope.$index)" ></i></el-table-column>
                <el-table-column  > <i class="el-icon-edit-outline eidtIcon" @click="tableDbEdit(scope.$index)" ></i></el-table-column>
                <el-table-column  > <i class="el-icon-edit-outline eidtIcon" @click="tableDbEdit(scope.$index)" ></i></el-table-column>
              </el-table> -->
                <table
                  style="width: 70%;float:left;margin-left:30px;margin-top:30px; border-collapse:collapse;text-align:center"
                  border="2"
                  cellspacing="0"
                  class="elTable"
                  :cell-style="{borderColor:'#aaa'}"
                >
                  <tr style="height:35px">
                    <td style="width:10%;" />
                    <td colspan="3"><b>条件：</b></td>
                    <td colspan="6"><b>情况：</b></td>
                  </tr>
                  <tr style="height:200px">
                    <td>备注：</td>
                    <td colspan="3">
                      <!-- <span v-if="detail.opinion.condition==''">是否查询客户微信和短信中（不还，套现，征信，贷款，欠钱，黑户，骗）以上字眼</span> -->
                      <b>{{ detail.opinion.condition }}</b>
                      <i
                        v-if="detail.desc_able"
                        class="el-icon-edit-outline eidtIcon"
                        @click="tableEditResultDesc('condition','条件')"
                      />
                    </td>
                    <td colspan="6">
                      <b>{{ detail.opinion.situation }}</b>
                      <i
                        v-if="detail.desc_able"
                        class="el-icon-edit-outline eidtIcon"
                        @click="tableEditResultDesc('situation','情况')"
                      />
                    </td>
                  </tr>
                  <tr style="height:35px">
                    <td><b>结果：</b></td>
                    <td colspan="9">
                      <b>{{ detail.opinion.result }}</b>
                      <i
                        v-if="detail.desc_able"
                        class="el-icon-edit-outline eidtIcon"
                        @click="tableEditResultDesc('result','结果')"
                      />
                    </td>
                  </tr>
                  <tr style="height:80px">
                    <td rowspan="2"><b>原因</b></td>
                    <td><b>批核点：</b></td>
                    <td v-for="num in 8">
                      <span v-if="point_list.passcount>=num">
                        <b>{{ point_list.pass[num-1].desc }}</b>
                        <i
                          v-if="detail.desc_able"
                          class="el-icon-edit-outline eidtIcon"
                          @click="tableEditOrderPoint('pass','通过点',num,1)"
                        />
                      </span>
                      <span v-else>
                        <i
                          v-if="detail.desc_able"
                          class="el-icon-edit-outline eidtIcon"
                          @click="tableEditOrderPoint('pass','通过点',0,1)"
                        />
                      </span>
                    </td>

                  </tr>
                  <tr style="height:80px">
                    <td><b>降分点：</b></td>
                    <td v-for="num in 8">
                      <span v-if="point_list.refusecount>=num">
                        <b>{{ point_list.refuse[num-1].desc }}</b>
                        <i
                          v-if="detail.desc_able"
                          class="el-icon-edit-outline eidtIcon"
                          @click="tableEditOrderPoint('refuse','拒绝点',num,2)"
                        />
                      </span>
                      <span v-else>
                        <i
                          v-if="detail.desc_able"
                          class="el-icon-edit-outline eidtIcon"
                          @click="tableEditOrderPoint('refuse','拒绝点',0,2)"
                        />
                      </span>
                    </td>
                  </tr>
                </table>
              </el-tab-pane>
              <el-tab-pane label="订单记录" name="4">
                <el-table
                  :key="tableRecord"
                  size="mini"
                  :data="record"
                  border
                  fit
                  highlight-current-row
                  style="width: 70%;margin-left:3%"
                >

                  <el-table-column label="管理类别" align="center">
                    <template slot-scope="{row}">
                      <span>{{ row.type_name }}</span>
                    </template>
                  </el-table-column>

                  <el-table-column label="操作人" align="center">
                    <template slot-scope="{row}">
                      <span>{{ row.name }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作内容" align="center">
                    <template slot-scope="{row}">
                      <span>{{ row.content }}</span>
                    </template>
                  </el-table-column>

                  <el-table-column label="创建时间" class-name="status-col">
                    <template slot-scope="{row}">

                      {{ row.create_time|formatDate }}

                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane v-if="nodes.indexOf('87')!=-1" label="催收" name="2">
                <!-- <el-form ref="collectform" :model="form" label-width="80px" style="margin-left:3%">
                <el-form-item label="催收方式" prop="way">
                  <el-checkbox-group v-model="collectform.way">
                    <el-checkbox v-for="item in way_list.way" :label="item.id">{{item.name}}</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="催收结果">
                  <el-radio-group v-model="collectform.result">
                    <el-radio v-for="item in way_list.result" :label="item.id">{{item.name}}</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="备注信息">
                  <el-input type="textarea" v-model="collectform.desc" style="width:30%"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmitCollect">保存</el-button>
                </el-form-item>
              </el-form> -->
                <collectForm :order_id="order_id" />
              </el-tab-pane>
              <el-tab-pane v-if="nodes.indexOf('87')!=-1" label="催收记录" name="3">

                <collectRecord v-if="activeNameDone==3" :order_id="order_id" />
              </el-tab-pane>
              <el-tab-pane label="还款计划" name="5">
                <div v-if="detail.order_status<7" class="filter-container" style="margin-left:3%">
                  <el-input
                    v-model="pay_plan.total_money"
                    placeholder="项目金额"
                    style="width: 130px;"
                    class="filter-item"
                  />
                  <el-input
                    v-model="pay_plan.total_period"
                    placeholder="期数"
                    style="width: 130px;"
                    class="filter-item"
                  />
                  <!-- <el-input
                    v-model="pay_plan.mediate"
                    placeholder="居间服务费"
                    style="width: 130px;"
                    class="filter-item"
                  /> -->
                  <el-input v-model="pay_plan.money_rate" placeholder="利率" style="width: 130px;" class="filter-item" />
                  <el-select v-model="pay_plan.hk_way" placeholder="还款方式" class="filter-item" style="width:130px">
                    <el-option selected label="二分之一梯度" :value="1" />
                    <el-option label="二分之一等额" :value="3" />
                    <el-option label="全期等额" :value="2" />
                  </el-select>
                  <el-button class="filter-item" type="primary" icon="el-icon-search" @click="plan">查看</el-button>
                </div>

                <el-table
                  :key="tableRecord"
                  size="mini"
                  :data="pay_plan.plan"
                  border
                  fit
                  highlight-current-row
                  style="width: 70%;margin-left:3%"
                >

                  <el-table-column label="期数" align="center">
                    <template slot-scope="{row}">
                      <span>{{ row.num }}</span>
                    </template>
                  </el-table-column>

                  <el-table-column label="本金" align="center">
                    <template slot-scope="{row}">
                      <span>{{ row.benjin }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="利息" align="center">
                    <template slot-scope="{row}">
                      <span>{{ row.rate }}</span>
                    </template>
                  </el-table-column>

                  <el-table-column label="还款金额" class-name="status-col">
                    <template slot-scope="{row}">{{ row.allmoney }}</template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>

            </el-tabs>
          </template>
        </el-collapse-item>
      </el-collapse>
      <el-dialog title="视频" :visible.sync="dialogVideoVisible">
        <div ref="rotate" style="width:100%;height:600px;text-align:center" class="circle">
          <video-player
            ref="videoPlayer"
            :options="playerOptions"
            :playsinline="true"
            format="yyyy-MM-dd"
            custom-event-name="customstatechangedeventname"
            style="width:100%;height:600px;text-align:center"
            class="video-player vjs-custom-skin"
          />
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="rotate($event)">旋 转</el-button>
          <el-button type="primary" @click="dialogVideoVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog style="width:1120px" :title="contact_title" :visible.sync="dialogContactVisible">

        <div v-if="contactType==3" class="hello">
          <el-row class="table-grid-content">
            <el-col :span="18" class="grid">
              <el-input v-model="inputsms" placeholder="请输入搜索内容" />
            </el-col>
            <el-col :span="3" class="grid" :gutter="1">
              <el-button type="success" icon="el-icon-search" @click="inputSmsSelect()">搜索</el-button>
            </el-col>
          </el-row>
        </div>
        <div class="phonebox">
          <!-- 通讯录 -->
          <div v-for="(item,index) in contact.contact" v-if="contactType==1" class="contactListbox">
            <span v-if="item.name" class="phonetitle l_title">{{ item.name }}</span>
            <el-row class="infolist infolist_top">
              <el-col :span="24">电话号码：
                <span v-for="(i,index) in item.phones"><span v-if="index>0">/</span>{{ i }}</span>
              </el-col>
            </el-row>
            <el-divider />
          </div>
          <!-- 通话记录 -->
          <div v-for="(item,index) in contact.call_log" v-if="contactType==2" class="contactListbox">
            <span v-if="item.name" class="phonetitle l_title">{{ item.name }}</span>
            <span v-else class="phonetitle l_title">{{ item.mobile }}</span>
            <el-row class="infolist infolist_top">
              <el-col :span="9">号码：{{ item.mobile }}</el-col>
              <el-col :span="15">通话类型：{{ item.type }}</el-col>
            </el-row>
            <el-row class="infolist infolist_top">
              <el-col :span="9">时长：{{ item.talkTime }}秒</el-col>
              <el-col :span="15">通话时间：{{ item.callTime }}</el-col>
            </el-row>
            <el-divider />
          </div>
          <!-- 短信 -->

          <div v-for="(item,index) in contact.sms" v-if="contactType==3" class="contactListbox">
            <span v-if="item.tel" class="phonetitle l_title">{{ item.tel }}</span>
            <el-row class="infolist infolist_top">
              <el-col :span="24">{{ item.content }}</el-col>
            </el-row>
            <el-divider />
          </div>

        </div>

        <span slot="footer" class="dialog-footer">
          <!-- <el-button type="primary" @click="dialogContactVisible = false">确 定</el-button> -->
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  fetchOrderDetail,
  submitCheckStatus,
  getBaiRongData,
  descOrderMain,
  getOrderPoint
} from '@/api/order'
import collectForm from '@/components/collect/form.vue'
import {
  getCollectRecord,
  getCollectWay,
  collectRecordAdd
} from '@/api/collection'
import collectRecord from '@/components/collect/index.vue'
import {
  getNodes
} from '@/utils'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import {
  videoPlayer
} from 'vue-video-player'
import {
  formatDate
} from '@/utils/formatDate.js'
import {
  parse
} from 'path-to-regexp'
export default {
  components: {
    videoPlayer, // 注册组件
    collectRecord,
    collectForm
  },
  filters: {
    formatDate(time) {
      time = time * 1000
      const date = new Date(time)

      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    },
    numberFormat(number) {
      return parseFloat(number).toFixed(1)
    },
    formatDateYearMonth(time) {
      const date = new Date(time)
      return formatDate(date, 'yyyy-MM-28')
    },
    formatDateYearMonthDay(time) {
      const date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd')
    }
  },
  data() {
    return {
      order_id:'',
      sms: '',
      inputsms: '',
      contact: [],
      contact_title: '',
      dialogContactVisible: false,
      contactType: 1,
      point_list: [],
      tableDataMain: [],
      projects: '',
      tableDataRelation: [],
      nodes: [],
      dialogBoolAble: false,
      dialogTdAble: false,
      form: {
        order_id: '',
        order_status: '',
        factoring_model: 0,
        factoring_rate: 0,
        first_pay: 0,
        content: '',
        bond: 0,
        is_bond: '1',
        loan_way: '1',
        mediate: 0,
        hk_way:1,
        nopaid_mediate:0
      },
      idcard_check: {
        code: 0,
        msg: ''
      },
      collectform: {
        way: [],
        result: '',
        desc: '',
        order_id: ''
      },
      way_list: [],
      reverse: false,
      activeNameDone: '1',
      activeName: ['4'],
      showImg: false,
      current: 0,
      detail: {
        opinion: {
          condition: '',
          result: '',
          situation: ''
        }
      },
      eight: 0,
      project: [],
      contract: [],
      operation: [],
      bool: [],
      tong: {
        final_score: '',
        final_decision: ''
      },
      bairong: {
        final_weight: '',
        final_decision: '',
        person: '',
        idcard: {
          RESULT: 1,
          MESSAGE: '一致'
        }
      },
      tableRecord: 1,
      listRecordLoading: true,
      listLoading: true,
      record: [],
      pay_day: '',
      activeTabs: 'first',
      activeImage: ['11'],
      activeText: ['1'],
      dialogImageVisible: false,
      dialogVideoVisible: false,
      path: null,
      drawer: false,
      src: null,
      order_id: '',
      collect_list: [],
      playerOptions: {

        autoplay: true,
        muted: false,

        height: '600px',
        width: '800px',

        language: 'zh-CN',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [{
          type: 'video/mp4',
          src: ''
        }],

        poster: '/static/images/author.jpg',
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      },
      rules: {
        order_status: [{
          required: true,
          message: '审核状态必须选择',
          trigger: 'blur'
        }]
        // content: [{
        //   required: true,
        //   message: '审核备注必须填写',
        //   trigger: 'blur'
        // }]
      },
      pay_plan: {
        total_money: '',
        total_period: '',
        money_rate: '',
        hk_way: '',
        mediate: 0,
        plan: []
      }
    }
  },
  computed: {
    period_money: function() {
      if (this.detail.project.total_period == null) {
        return 0
      } else {
        // this.pay_plan.total_money = this.detail.project.total_money;
        // this.pay_plan.total_period = this.detail.project.total_period;
        // this.pay_plan.money_rate = this.detail.project.money_rate;
        // this.pay_plan.hk_way = parseInt(this.detail.hk_way);
        // this.plan()
        if (this.detail.hk_way == 1) {
          return parseFloat(this.detail.project.total_money / this.detail.project.total_period + this.detail.project
            .total_money * this.detail.project.money_rate * 2).toFixed(1)
        } else {
          return parseFloat(this.detail.project.total_money / this.detail.project.total_period + this.detail.project
            .total_money * this.detail.project.money_rate).toFixed(1)
        }
      }
    },
    payment_date: function() {
      var time
      if (this.detail.pass_time != null) {
        time = this.detail.pass_time
      } else {
        time = this.detail.project.create_time
      }
      var date = new Date(time * 1000)
      var day = date.getDate()
      if (day <= 28) {
        this.eight = 0
        this.pay_day = day
      } else {
        this.eight = 1
        this.pay_day = 28
      }
      this.paid_date = new Date(time * 1000).setMonth(new Date(time * 1000).getMonth() + parseInt(this.detail
        .project.total_period))
      this.datailFormat()
      return new Date(time * 1000).setMonth(new Date(time * 1000).getMonth() + 1)
    }

  },
  created() {
    this.getOrderDetail();
    this.order_id = this.$route.params.order_id;
    this.collectform.order_id = this.$route.params.order_id;
    this.getCollectRecord(this.order_id);
    this.nodes = getNodes();
    this.getBaiRongData();
    this.getOrderPoint();
    
  },
  methods: {
    openContactDialog(lab) {
      if (lab == 1) {
        this.contact_title = '通讯录'
      } else if (lab == 2) {
        this.contact_title = '通话记录'
      } else {
        this.contact_title = '短信'
      }
      this.dialogContactVisible = true
      this.contactType = lab
    },
    inputSmsSelect() {
      const new_arr = []
      for (let i = 0; i < this.sms.length; i++) {
        if (this.sms[i].content.indexOf(this.inputsms) > -1) {
          new_arr.push(this.sms[i])
        }
      }
      this.contact.sms = new_arr
    },
    objectSpanMethod({
      row,
      column,
      rowIndex,
      columnIndex
    }) { // 表格合并行
      if (rowIndex === 0) {
        if (columnIndex === 1) {
          return {
            rowspan: 1,
            colspan: 3
          }
        }
        if (columnIndex === 2) {
          return {
            rowspan: 1,
            colspan: 6
          }
        }
      }
      if (rowIndex == 1) {
        if (columnIndex === 1) {
          return {
            rowspan: 1,
            colspan: 3
          }
        }
        if (columnIndex === 2) {
          return {
            rowspan: 1,
            colspan: 6
          }
        }
      }
      if (rowIndex == 2) {
        if (columnIndex === 1) {
          return {
            rowspan: 1,
            colspan: 9
          }
        }
      }
      if (rowIndex == 3) {
        if (columnIndex === 0) {
          return {
            rowspan: 2,
            colspan: 1
          }
        }
      }
    },
    iRowStyle: function({
      row,
      rowIndex
    }) {
      if (rowIndex == 1) {
        return {
          height: '220px'
        }
      }
      if (rowIndex == 3 || rowIndex == 4) {
        return {
          height: '100px'
        }
      }
    },
    mediateinput(){
      this.form.nopaid_mediate -=  this.form.mediate;
      if(this.detail.order_status>=4){
          this.plan();
      }
    },
    toDetail(order_id) {
      this.$router.push('/order/detail/' + order_id)
    },
    tableEditMainDesc(row) {
      row.order_id = this.order_id
      row.customer_id = this.detail.customer_id
      row.lab = 1
      this.$prompt('请输入' + row.title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: row.value
      }).then(({
        value
      }) => {
        row.value = value
        descOrderMain(row).then(response => {
          this.$message({
            type: 'success',
            message: '已录入'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '未录入'
        })
      })
    },
    tableEditLetterDesc(row, field, title) {
      const pam = {}
      pam.order_id = this.order_id
      pam.customer_id = this.detail.customer_id
      pam.field = field
      pam.title = title
      pam.id = row.id
      pam.lab = 2
      this.$prompt('请输入' + title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: row[field]
      }).then(({
        value
      }) => {
        pam.value = value
        row[field] = value
        descOrderMain(pam).then(response => {
          this.$message({
            type: 'success',
            message: '已录入'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '未录入'
        })
      })
    },
    tableEditResultDesc(field, title) {
      const pam = {}
      pam.order_id = this.order_id
      pam.customer_id = this.detail.customer_id
      pam.field = field
      pam.title = title
      // pam.id = row.id;
      pam.lab = 3
      this.$prompt('请输入' + title, '提示', {
        inputType: 'textarea',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: this.detail.opinion[field]
      }).then(({
        value
      }) => {
        pam.value = value
        this.detail.opinion[field] = value
        descOrderMain(pam).then(response => {
          this.$message({
            type: 'success',
            message: '已录入'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '未录入'
        })
      })
    },
    tableEditOrderPoint(field, title, num, type) {
      const pam = {}
      pam.order_id = this.order_id
      pam.customer_id = this.detail.customer_id
      pam.field = 'desc'
      pam.title = title
      pam.type = type
      let inindesc = ''
      let d = 0
      const count = 1
      pam.id = 0
      if (num != 0) {
        d = num - 1
        inindesc = this.point_list[field][d].desc
        pam.id = this.point_list[field][d].id
      }
      pam.lab = 4
      this.$prompt('请输入' + title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: inindesc
      }).then(({
        value
      }) => {
        pam.value = value
        descOrderMain(pam).then(response => {
          this.$message({
            type: 'success',
            message: '已录入'
          })
          this.getOrderPoint()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '未录入'
        })
      })
    },
    getBaiRongData() {
      const para = {
        order_id: this.order_id
      }
      getBaiRongData(para).then(response => {
        this.bairong = response.data.rule_data.Rule.result
        this.bairong.person = response.data.person.result_name
        if (response.data.idcard) {
          this.bairong.idcard = response.data.idcard.IdTwo_z
        }
      })
    },
    tabChange() {
      if (this.nodes.indexOf('91') == -1 || (this.detail.order_status != 1 && this.detail.order_status != 5 && this
        .detail.order_status != 8 && this.detail.order_status != 10 && this.detail.order_status != 11)) {
        this.activeNameDone = '4'
      }
    },
    // 点击放大图片
    clickImg(e) {
      this.showImg = true
      // 获取当前图片地址
      this.imgSrc = e.currentTarget.src
    },
    plan() {
      this.pay_plan.plan = []
      if (this.pay_plan.hk_way == '' || this.pay_plan.total_money == '' || this.pay_plan.total_period == '' || this
        .pay_plan.money_rate == '' || this.pay_plan.mediate == 0) {
        // this.$message.error('请完善信息！');
        // return;
      }

      const benjin = parseFloat(this.pay_plan.total_money / this.pay_plan.total_period).toFixed(1)
      let two = this.pay_plan.total_period / 2

   
      const amonth_rate = parseFloat(this.pay_plan.total_money * parseFloat(this.pay_plan.money_rate)).toFixed(1)
      const all_rate = parseFloat(amonth_rate * this.pay_plan.total_period).toFixed(1)
      let rate = parseFloat(all_rate / two).toFixed(1)

      // 计算已还服务费的占比
      const no_paid_mediate = all_rate

      /** 每期的居间服务费**/
   
      rate = (parseFloat(no_paid_mediate / this.pay_plan.total_period)).toFixed(1)
    
      /** 前三分之一的三分之一**/


      for (let i = 0; i < this.pay_plan.total_period; i++) {
        const a = {
          num: parseInt(i + 1),
          benjin: benjin
        }

        if (this.pay_plan.hk_way == 1) {

          if (i < two) {
            a.rate = parseFloat(rate*2).toFixed(1)
          } else {
            a.rate = 0

          }
        }else{
          a.rate = parseFloat(rate).toFixed(1)
        }
        a.allmoney = (parseFloat(a.rate) + parseFloat(benjin)).toFixed(1)
        this.pay_plan.plan.push(a)
      }
    },
    getCollectRecord() {
      const data = {
        order_id: this.order_id
      }
      getCollectRecord(data).then(response => {
        this.collect_list = response.data
      })
    },
    onSubmitCollect() {
      if (this.collectform.way == '' || this.collectform.result == '') {
        this.$notify({
          title: '提示',
          message: '请完善信息',
          type: 'warning',
          duration: 2000
        })
        return
      }
      collectRecordAdd(this.collectform).then(response => {
        if (response.code == 200) {
          this.$notify({
            title: '提示',
            message: '保存成功',
            type: 'success',
            duration: 2000
          })
          this.getCollectRecord(this.form.order_id)
          this.collectform.way = []
          this.collectform.result = ''
          this.collectform.desc = ''
        }
        this.listLoading = false
      })
    },
    getOrderPoint() {
      const pam = {
        order_id: this.order_id
      }
      getOrderPoint(pam).then(response => {
        this.point_list = response.data
      })
    },
    mathauto(lab) {
      if (lab == 1) {
        this.form.first_pay = (this.detail.project.total_money * this.form.factoring_rate).toFixed(0)
      } else {
        this.form.factoring_rate = (this.form.first_pay / this.detail.project.total_money).toFixed(5)
      }
    },

    // 关闭放大图片
    closeBigImg(e) {
      this.showImg = false
    },
    booldata(order_id) {
      this.$router.push('/order/bool/' + order_id)
    },
    tongdun(order_id) {
      this.$router.push('/order/tongdun/' + order_id)
    },
    bairongdetail(order_id) {
      this.$router.push('/order/bairong/' + order_id)
    },
    rotate(e) {
      var ele = e.currentTarget
      this.current = (this.current + 90) % 360
      this.$refs.rotate.style.transform = `rotate(${this.current}deg)`
      // ele.transform = 'translateX(10px)'
    },

    openImageDialog(path) {
      this.dialogImageVisible = true
      this.path = path
    },
    openVideoDialog(path) {
      this.dialogVideoVisible = true
      this.playerOptions.sources[0].src = path
      // console.log(this.playerOptions.sources.src)
    },
    onSubmit() {
      this.listLoading = true
      if (this.form.order_status == 7) {
        if ((this.form.factoring_model == 0) || (this.form.factoring_rate > 1)) {
          this.$message.error('保理模式必须选择，或者折扣必须大于0小于1')
        } else {
          this.$refs['dataForm'].validate((valid) => {
            if (valid) {
              submitCheckStatus(this.form).then(resp => {
                if (resp.code == 200) {
                  this.listRecordLoading = false
                  this.$notify({
                    title: 'Success',
                    message: 'Created Successfully',
                    type: 'success',
                    duration: 2000,
                    // onClose: this.getOrderDetail(),
                    onClose: this.$router.push('/order/sign')
                  })
                } else {
                  this.$notify({
                    title: '提示',
                    message: '操作失败',
                    type: 'warning',
                    duration: 2000
                  })
                }
              })
              // console.log(this.form)
            }
          })
        }
      } else {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            submitCheckStatus(this.form).then(resp => {
              this.listRecordLoading = false
              this.$notify({
                title: 'Success',
                message: 'Created Successfully',
                type: 'success',
                duration: 2000,
                onClose: this.getOrderDetail()
              })
            })
            // console.log(this.form)
          }
        })
      }
      this.detail.order_status = this.form.order_status
      this.tabChange();
      this.listLoading = false
    },
    getOrderDetail() {
      const order_id = this.$route.params.order_id
      this.order_id = order_id;
      fetchOrderDetail(order_id).then(resp => {
        this.detail = resp.data.detail

        if (this.detail.project.total_period != null) {
          this.pay_plan.total_money = this.detail.project.total_money
          this.pay_plan.total_period = this.detail.project.total_period
          this.pay_plan.money_rate = this.detail.project.money_rate
          this.pay_plan.hk_way = parseInt(this.detail.hk_way)

          console.log('this.pay_plan.==', this.pay_plan)
          this.plan()
        }

        this.form.factoring_rate = resp.data.detail.factoring_rate
        this.form.first_pay = resp.data.detail.first_pay
        this.form.factoring_model = resp.data.detail.factoring_model
        this.project = resp.data.project
        this.record = resp.data.record
        this.contract = resp.data.contract
        // this.contact = resp.data.contact
        // this.sms = resp.data.contact.sms
        this.bool = resp.data.bool.main.resp_data
        if (resp.data.bool.main.resp_data.length == 0) {
          this.$notify({
            title: '提示',
            message: resp.data.bool.main.resp_msg,
            type: 'error',
            duration: 2000
          })
        }
        // this.idcard_check = resp.data.detail.check_idcard
        // this.tong = resp.data.tong.result_desc.ANTIFRAUD
        this.tableDataRelation = this.detail.relation
        // 项目
        for (var i = 0; i < this.detail.service_list.length; i++) {
          this.projects += '(' + this.detail.service_list[i].project_name + ')'
        }
        if(resp.data.oper){
          this.operation = resp.data.oper.attach_ids
        }
        this.form.nopaid_mediate = (this.detail.project.total_money * this.detail.project.money_rate*this.detail.project.total_period).toFixed(1);
  
        if(this.detail.order_status>=4){
          this.plan();
        }
        this.form.order_id = order_id
        if ((this.detail.order_status == 1) || (this.detail.order_status == 5) || (this.detail.order_status ==
            8) ||
            (this.detail.order_status == 10) || (this.detail.order_status == 11)) {
          this.activeTabs = 'first'
        } else if ((this.detail.order_status == 13) || (this.detail.order_status == 12)) {
          this.activeTabs = 'three'
        } else {
          this.activeTabs = 'second'
        }
        if (this.detail.order_status >= 8) {
          this.activeImage.push('22')
        }
        if (this.detail.order_status >= 11) {
          this.activeImage.push('33')
        }
        this.tabChange()
        this.listLoading = false
      })
    },
    datailFormat() {
      this.tableDataMain = [{
        title: '医院 ：',
        value: this.detail.merchant_name,
        editable: 0
      },
      {
        title: '客户姓名 ：',
        value: this.detail.real_name,
        editable: 0
      },
      {
        title: '项目 ：',
        value: this.projects,
        editable: 0
      },
      {
        title: '产品单价 ：',
        value: this.detail.project.total_money,
        editable: 0
      },
      {
        title: '贷款金额 ：',
        value: (this.detail.project.total_money + this.detail.project.total_money * this.detail.project
          .money_rate * this.detail.project.total_period).toFixed(1),
        editable: 0
      },
      {
        title: '分期期数 ：',
        value: this.detail.project.total_period,
        editable: 0
      },
      {
        title: '月还款 ：',
        value: this.period_money,
        editable: 0
      },
      {
        title: '还款日期 ：',
        value: this.pay_day + '号',
        editable: 0
      },
      {
        title: '身份证号码 ：',
        value: this.detail.idcard,
        editable: 0
      },
      {
        title: '手机号码 ：',
        value: this.detail.mobile,
        editable: 0
      },
      {
        title: '手机实名情况：',
        value: this.detail.customer.real_mobile,
        field: 'real_mobile',
        editable: 1
      },
      {
        title: '手机使用年限：',
        value: this.detail.customer.mobile_years,
        field: 'mobile_years',
        editable: 1
      },
      {
        title: '支付宝实名 ：',
        value: this.detail.customer.real_alipay,
        field: 'real_alipay',
        editable: 1
      },
      {
        title: '工作 ：',
        value: this.detail.letter.duty || '',
        editable: 0
      },
      {
        title: '公司地址 ：',
        value: this.detail.letter.company_address || '',
        editable: 0
      },
      {
        title: '居住地址 ：',
        value: this.detail.letter.household_reg_address || '',
        editable: 0
      },
      {
        title: '芝麻分 ：',
        value: this.detail.customer.zhimafen,
        field: 'zhimafen',
        editable: 1
      },
      {
        title: '存款情况 ：',
        value: this.detail.customer.deposit,
        field: 'deposit',
        editable: 1
      }
      ]
    },
    handleChange(val) {
      // console.log(val)
    },
    handleClick(tab, event) {
      // console.log(tab, event)
    }

  }
}
</script>

<style>
  .phonebox {
    width: 400px;
    height: 600px;
    border: 1px solid #ccc;
    border-radius: 2px;
    margin-left: 10%;
    overflow: auto;
  }

  .contact_box {
    border: 1px solid #ccc;
    text-align: center;
  }

  .phonetitle {
    font-weight: 700;
  }

  .hello {
    width: 400px;
    margin-left: 10%;
    ;
  }

  .btn_contact {
    margin-top: 20px;
    width: 100px;
    text-align: center;
  }

  .app-container {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

  .box {
    margin-left: 50px;
    margin-right: 50px;
  }

  .contactListbox {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
  }

  .toinfo {
    text-align: right;
  }

  .infolist_top {
    margin-top: 10px;
  }

  .dalogg {
    width: 100%;
    ;
    height: 100%;
    ;
    background: #fff;
    position: absolute;
    z-index: 100;
    opacity: 0
  }

  .infolist {
    color: #333;
    font-size: 13px;
    margin-left: 10px;
  }

  .infolist_file {
    color: #1890FF;
    font-size: 15px;
    margin-left: 10px;
  }

  .mgtop {
    margin-top: 10px
  }

  .el-divider--horizontal {
    margin: 10px 0;
  }

  .l_title {
    font-size: 14px;
  }

  .media {
    float: left;
    margin-left: 20px;
  }

  .video_box {
    width: 200px;
    height: 200px;
    margin-left: 5px;
    float: left;
    position: relative;
  }

  .img_box {
    width: 100px;
    height: 100px;
    margin-left: 5px;
    float: left;
    position: relative;
    margin-top: 5px;
  }

  .img_box img {
    margin-left: 50%;
    transform: translateX(-50%);
  }

  .hovers {
    position: absolute;
    top: 0px;
    width: 100%;
    background: #fff;
    color: #333;
    text-align: center;
    z-index: 100;
    display: none;
  }

  .img_box:hover .hovers {
    display: block;
  }

  .el-tabs__nav-wrap::after {
    border-bottom: none;
  }

  .elTable {
    border: 1px solid #111;
  }

  .el-tabs__nav-wrap::after {
    background-color: #fff
  }

  video {
    width: 100%;
    height: 100%;
    text-align: center;
  }

  .demofrom {
    height: 15px;
  }

  td {
    width: 10%;
  }

  .input_video {
    width: 400px;
    height: 400px;
    margin: 0 auto;

  }

  @keyframes rotate {

    0% {
      transform: (0deg)
    }

    100% {
      transform: (360deg)
    }

  }

  .go {

    animate: rotate 1s;

  }

  .el-collapse-item__header {
    margin-left: 50px;
    margin-right: 50px;
    border-bottom: none;
    color: #1890FF
  }

  .el-collapse-item {
    border-bottom: 1px solid #e6ebf5;
  }
</style>
